<template>
  <!-- 营业区总监 -->
  <div id="app">
    <!-- 轮播图组件，自动播放间隔为3000毫秒，指示器颜色为白色 -->
    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="image in swipeImages" :key="image">
        <img :src="image" @click="showPreview" />
      </van-swipe-item>
    </van-swipe> -->
    <Transition name="bounce">
      <div class="showAdvertising" v-if="advertisingStore.showAdvertising">
        <!-- <div class="countDown">{{ codeText }}</div> -->
        <img :src="advertising" alt="" />
      </div>
    </Transition>
    <div v-if="!advertisingStore.showAdvertising">
      <!-- 头部区域 -->
      <div class="header">
        <!-- 用户图标 -->
        <van-icon name="user-circle-o"></van-icon>
        <!-- 显示用户名 -->
        <div>{{ name }}总监，你好！</div>
      </div>
      <!-- 标题：“五个一”功成（日） -->
      <div class="title">“五个一”功成（日）</div>
      <!-- 网格布局，每行显示3列，可点击 -->
      <van-grid :column-num="3" clickable>
        <!-- 网格项，点击跳转到director_Daily页面 -->
        <van-grid-item @click="toNext('director_Daily')">
          <!-- 图标 -->
          <van-icon name="records" size="36" color="#C42718" />
          <!-- 文字 -->
          <p>一日三走访</p>
        </van-grid-item>
      </van-grid>
      <!-- 标题：“五个一”功成（周） -->
      <div class="title">“五个一”功成（周）</div>
      <!-- 网格布局，每行显示3列，可点击 -->
      <van-grid :column-num="3" clickable>
        <!-- 网格项，点击跳转到director_WeeklyPreserve页面 -->
        <van-grid-item @click="toNext('director_WeeklyPreserve')">
          <!-- 图标 -->
          <van-icon name="comment-o" size="36" color="#f8c622" />
          <!-- 文字 -->
          <p>一周一维护</p>
        </van-grid-item>
      </van-grid>
      <!-- 标题：“五个一”功成（月） -->
      <div class="title">“五个一”功成（月）</div>
      <!-- 网格布局，每行显示3列，可点击 -->
      <van-grid :column-num="3" clickable>
        <!-- 网格项，点击跳转到director_MonthProject页面 -->
        <van-grid-item @click="toNext('director_MonthProject')">
          <!-- 图标 -->
          <van-icon name="todo-list-o" size="36" color="#C42718" />
          <!-- 文字 -->
          <p>一月一项目</p>
        </van-grid-item>
        <!-- 网格项，点击跳转到director_MonthlyReport页面 -->
        <van-grid-item @click="toNext('director_MonthlyReport')">
          <!-- 图标 -->
          <van-icon name="todo-list-o" size="36" color="#f8c622" />
          <!-- 文字 -->
          <p>支行月报告</p>
        </van-grid-item>
        <!-- 网格项，点击跳转到director_MonthlyPlan页面 -->
        <van-grid-item @click="toNext('director_MonthlyPlan')">
          <!-- 图标 -->
          <van-icon name="todo-list-o" size="36" color="#00a79d" />
          <!-- 文字 -->
          <p>月度计划</p>
        </van-grid-item>
      </van-grid>
      <!-- 标题：“五个一”功成（季） -->
      <div class="title">“五个一”功成（季）</div>
      <!-- 网格布局，每行显示3列，可点击 -->
      <van-grid :column-num="3" clickable>
        <!-- 网格项，点击跳转到director_SeasonalStart页面 -->
        <van-grid-item @click="toNext('director_SeasonalStart')">
          <!-- 图标 -->
          <van-icon name="todo-list-o" size="36" color="#7766D1" />
          <!-- 文字 -->
          <p>季启动</p>
        </van-grid-item>
      </van-grid>
      <!-- 标题：我的记录 -->
      <div class="title">我的记录</div>
      <!-- 网格布局，每行显示3列，可点击 -->
      <van-grid :column-num="3" clickable>
        <!-- 网格项，点击跳转到director_DailyList页面 -->
        <van-grid-item @click="toNext('director_DailyList')">
          <!-- 图标 -->
          <van-icon name="credit-pay" size="36" color="#C42718" />
          <!-- 文字 -->
          <p>走访记录</p>
        </van-grid-item>
        <!-- 网格项，点击跳转到director_WeeklyPreserveRecordList页面 -->
        <van-grid-item @click="toNext('director_WeeklyPreserveRecordList')">
          <!-- 图标 -->
          <van-icon name="ecard-pay" size="36" color="#3762FB" />
          <p>维护记录</p>
        </van-grid-item>
        <van-grid-item @click="toNext('director_MonthProjectList')">
          <!-- 网格项，点击跳转到director_MonthProjectList页面 -->
          <van-icon name="points" size="36" color="#EC8316" />
          <!-- 图标 -->
          <p>项目记录</p>
          <!-- 文字 -->
        </van-grid-item>
        <van-grid-item @click="toNext('director_MonthlyReportList')">
          <!-- 网格项，点击跳转到director_MonthlyReportList页面 -->
          <van-icon name="todo-list-o" size="36" color="#f8c622" />
          <!-- 图标 -->
          <p>支行月报告记录</p>
          <!-- 文字 -->
        </van-grid-item>
        <van-grid-item @click="toNext('director_MonthlyPlanList')">
          <!-- 网格项，点击跳转到director_MonthlyPlanList页面 -->
          <van-icon name="todo-list-o" size="36" color="#00a79d" />
          <!-- 图标 -->
          <p>月度计划记录</p>
          <!-- 文字 -->
        </van-grid-item>
        <van-grid-item @click="toNext('director_SeasonalStartList')">
          <!-- 网格项，点击跳转到director_SeasonalStartList页面 -->
          <van-icon name="todo-list-o" size="36" color="#7766D1" />
          <!-- 图标 -->
          <p>季启动记录</p>
        </van-grid-item>
      </van-grid>
      <div class="title">数据统计报表</div>
      <van-grid :column-num="3" clickable>
        <!-- 标题：数据统计报表 -->
        <van-grid-item @click="toNext('directorsReport')">
          <van-icon name="column" size="36" color="#00a79d" />
          <p>我的填写情况</p>
        </van-grid-item>
        <van-grid-item @click="toNext('deptManagerReport2')">
          <van-icon name="completed" size="36" color="#f8c622" />
          <p>营业部经理报表</p>
        </van-grid-item>
        <van-grid-item @click="toNext('saleManagerReport4')">
          <van-icon name="bar-chart-o" size="36" color="#C42718" />
          <p>客户经理报表</p>
        </van-grid-item>
      </van-grid>
      <div class="title">上周榜单</div>
      <van-grid :column-num="3" clickable>
        <van-grid-item @click="toNext('/saleManagerTutoringTop')">
          <van-icon name="award" size="36" color="#C42718" />
          <p>客户经理一日三辅导</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/saleManagerPreserveTop')">
          <van-icon name="award" size="36" color="#f8c622" />
          <p>客户经理一周一维护</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/saleManagerTrainingTop')">
          <van-icon name="award" size="36" color="#C42718" />
          <p>客户经理一周一外训</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/deptManagerTutoringTop')">
          <van-icon name="award" size="36" color="#00a79d" />
          <p>营业部经理一日三走访</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/deptManagerSalonTop')">
          <van-icon name="award" size="36" color="#C42718" />
          <p>营业部经理一周一微沙</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/deptManagerLargeorderTop')">
          <van-icon name="award" size="36" color="#7766D1" />
          <p>营业部经理一周一大单</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/directorsTutoringTop')">
          <van-icon name="award" size="36" color="#3762FB" />
          <p>总监一日三走访</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/directorsPreserveTop')">
          <van-icon name="award" size="36" color="#f8c622" />
          <p>总监一周一维护</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/directorsMonthprojectTop')">
          <van-icon name="award" size="36" color="#00a79d" />
          <p>总监一月一项目</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  onUnmounted,
  watch,
  computed,
  provide,
  inject,
  ref,
  reactive,
  nextTick,
  h
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useCountDown } from '@vant/use'
const router = useRouter()
const route = useRoute()
const dayjs = inject('$dayjs')
const showPageLoading = inject('showPageLoading')
const hidePageLoading = inject('hidePageLoading')
const showAllNonBaseMenuItem = inject('showAllNonBaseMenuItem')
const hideAllNonBaseMenuItem = inject('hideAllNonBaseMenuItem')
import { isIOS, parseTime, handleFontSize } from '@/utils'

import { getcarouselMapApi } from '@/request/api.js'
import advertising from '@imgs/yyczj.jpg'
const swipeImages = ref([])
import { useAdvertisingStore } from '@/stores/stores'
const advertisingStore = useAdvertisingStore()
onMounted(() => {
  if (advertisingStore.showAdvertising) {
    countDown.start()
  }
  agentcode.value = route.query.agentCode
  name.value = route.query.name
  // getCarouselMap()
  // agentcode.value = "wujieqing"
})

// 倒计时方法
const codeText = ref('')
const countDown = useCountDown({
  time: 2 * 1000,
  onFinish: () => {
    countDown.reset()
    advertisingStore.showAdvertising = false
  },
  onChange: (value) => {
    codeText.value = value.seconds
  }
})

// const currentTime = ref(countDown.current)
function getCarouselMap() {
  getcarouselMapApi().then((res) => {
    console.log(res)
    swipeImages.value = res.data
  })
}
function toNext(href) {
  router.push({
    path: href,
    query: {
      agentcode: agentcode.value
    }
  })
}

const agentcode = ref('')
const name = ref('')

// function showPreview() {
//   showImagePreview({
//     images: swipeImages.value,
//     closeable: true
//   })
// }
</script>
<style lang="less" scoped>
@import '@css/agentIndex.less';
</style>
